<template>
<div class="register">
  <div class="register-title">
    <i @click="gologin" class="iconfont icon-arrow-right"></i>
  </div>
  <div class="register-body">
    <div class="body-title">
      <i class="iconfont icon-faxian"></i>
      <span>世界从未停止精彩</span>
    </div>
    <div class="body-input">
      <div class="input-box">
        <input v-model="register.phone" type="text" placeholder="请输入手机号">
        <i class="iconfont icon-shouji"></i>
      </div>
      <div class="input-box">
        <input v-model="register.Code" type="text" placeholder="验证码">
        <button :disabled="ischeck" @click="getyzm">{{ yzm }}</button>
      </div>
      <div class="input-box">
        <input v-model="register.pas" type="password" placeholder="请输入密码">
        <i class="iconfont icon-mima"></i>
      </div>
      <div class="input-box">
        <input v-model="register.ispas" type="password" placeholder="请再次输入密码">
        <i class="iconfont icon-mima"></i>
      </div>
      <div class="input-box">
        <button @click="gouserinfo(register)">注册</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: "register",
  data(){
    return{
      register: {},
      yzm: '获取验证码',
      ischeck: false,
    }
  },
  methods:{
    async getyzm(){
      if(!this.register.phone){
        Toast.fail('请输入手机号');
        return;
      }
      if (!(/^1[3456789]\d{9}$/.test(this.register.phone))) {
        Toast.fail('请输入正确的手机号');
        return;
      }
      const isres = await this.$axios({
        url: '/blog/userfindall',
        method: 'post',
        data:{
          phone: this.register.phone
        }
      })
      const { success, data } = isres.data
      if(success){
        if(data.length > 0){
          Toast.fail('该手机号已注册');
          return
        }
      }else {
        Toast.fail('系统错误');
        return
      }
      console.info('1')
      let time = 60;
      var settime = setInterval(()=>{
        this.yzm = `${time--}s后重发`
        this.ischeck = true
        if(time == -2){
          clearInterval(settime)
          this.yzm = '发送验证码'
          this.ischeck = false
        }
      },1000)
      try {
        const res = await this.$axios({
          url: '/blog/sendsms',
          method: 'post',
          data: {
            phone: this.register.phone
          }
        })
        const { success } = res.data;
        if(success){
          Toast.success('发送成功')
        }else {
          Toast.fail('发送失败');
        }
      }catch (e) {
        Toast.fail('发送失败');
      }
    },
    gologin(){
      this.$router.push("/")
    },
    async gouserinfo(register){
      if(!(register.phone && register.pas && register.ispas)){
        Toast.fail('请填写完整信息');
        return
      }
      if (!(/^1[3456789]\d{9}$/.test(register.phone))) {
        Toast.fail('请输入正确的手机号');
        return;
      }
      try {
        const res = await this.$axios({
          url: '/blog/isregister',
          method: 'post',
          data:{
            phone: register.phone,
            Code: register.Code,
          }
        })
        const { success, msg } = res.data
        if(!success){
          Toast.fail(msg);
          return
        }
      }catch (e) {
        return
      }
      if(register.pas !== register.ispas){
        Toast.fail('密码校验不一致');
        return
      }
      this.$router.replace({
        name: "userinfo",
        params: {
          register,
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.register{
  background: url(../assets/register.jpg)center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .register-title{
    margin-top: vw(30);
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    i{
      margin-left: vw(30);
      font-size: vw(50);
      color: #c1c1c1;
    }
  }
  .register-body{
    width: vw(550);
    margin: 0 auto;
    margin-top: vw(50);
    background-color: #32323290;
    border-radius: vw(20);
    padding-bottom: vw(50);
    overflow: hidden;
    .body-title{
      width: 100%;
      text-align: center;
      margin-top: vw(50);
      img{
        display: block;
        margin: 0 auto;
        width: 50px;
        height: 50px;
      }
      i{
        font-size: vw(100);
        display: block;
        color: #eae9e9;
      }
      span{
        color: #eae9e9;
        font-weight: bold;
        font-size: vw(40);
      }
    }
    .body-input{
      width: 100%;
      text-align: center;
      .input-box{
        margin-top: vw(40);
        position: relative;
        input{
          width: vw(400);
          height: vw(80);
          background-color: #00000000;
          list-style: none;
          outline: none;
          border: 0;
          border-bottom: 1px solid #c2c2c2;
          color: white;
          padding: 0;
          padding-left: vw(30);
          box-sizing: border-box;
          font-size: vw(25);
          &::-webkit-input-placeholder{
            color: #e5e4e4;
          }
        }
        i{
          position: absolute;
          font-size: vw(40);
          top: 50%;
          transform: translate(vw(-50),vw(-25));
          color: #c1c1c1;
        }
        button{
          padding: vw(15) vw(130);
          outline: none;
          background-color: #ffffff00;
          border: 1px solid #ffffff;
          border-radius: vw(10);
          color: #ffffff;
        }
        &:nth-child(2){
          width: vw(400);
          margin: vw(30) auto;
          display: flex;
          justify-content: space-between;
          input{
            width: vw(200);
          }
          button{
            padding: vw(0) vw(20);
            background-color: #00000000;
            outline: none;
            border: 1px solid #ffffff;
            border-radius: vw(10);
            color: #ffffff;
            font-size: vw(25);
            &:active{
              background-color: #c1c1c130;
            }
          }
        }
      }
    }
  }
}
</style>
